<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row :gutter="10">
                        <div style="float:right;margin-bottom: 10px;">
                            <Input v-model="filter.phone" @on-search="search" search enter-button="查询" placeholder="请输入用户手机号"
                                   style="width:250px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                        </div>
                        <div style="float:right;margin-bottom: 10px;">
                            <Input v-model="filter.company_name" @on-search="search" search enter-button="查询" placeholder="请输入公司名称"
                                   style="width:250px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                        </div>
                        <div style="float:right;margin-bottom: 10px;">
                          <span style="margin-right: 11px;">审核状态</span>
                          <Select v-model="filter.audit_status" style="width: 100px; margin-right: 35px;" @on-change="search">
                              <Option value="-1">全部</Option>
                              <Option value="0">未审核</Option>
                              <Option value="1">审核通过</Option>
                              <Option value="2">审核未通过</Option>
                          </Select>
                        </div>
                    </Row>
                    <Row class="margin-top-10 table_pattern">
                        <Table :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="show_audit" title="认证审核" width="500px" :mask-closable="false" class="public_modal_header edit_modal">
          <div style="width: 100%;margin: 0 auto;padding: 50px;">
            <RadioGroup v-model="audit_status">
              <Radio label="1" style="font-size: 15px;margin-right:50px;">审核通过</Radio>
              <Radio label="2" style="font-size: 15px;">审核失败</Radio>
            </RadioGroup>
            <Input v-model="remark" type="textarea" :rows="5" v-if='audit_status == 2' style="margin-top:20px" placeholder='请输入审核拒绝原因' />
          </div>
          <div class="btns">
            <Button @click.stop="show_select_repair = false">取消</Button>
            <Button @click.stop="auditUserAuthOk" type="primary" style="margin-left:15px;">确定</Button>
          </div>
        </Modal>
        <Modal v-model="edit_company" title="修改认证信息" width="800px" :mask-closable="false" class="goods_modal" :z-index='100'>
            <Form :model="formValidate" ref="formValidate" :label-width="120">
                <FormItem label="公司名称" prop="company_name" class="label_required">
                    <Input v-model="formValidate.company_name" placeholder="请输入公司名称" style='width:60%'/>
                </FormItem>
                <FormItem label="公司地址" prop="company_address" class="label_required">
                    <Input v-model="formValidate.company_address" placeholder="请输入公司地址" style='width:60%'/>
                </FormItem>
                <FormItem label="社会信用代码" prop="company_code" class="label_required">
                    <Input v-model="formValidate.company_code" placeholder="请输入社会信用代码" style='width:60%'/>
                </FormItem>
                <FormItem label="营业执照" prop="cover">
                    <div>
                        <Row type="flex" justify="start" align="middle" class="height-100">
                            <div style="display: block;text-align: center;">
                                <Upload
                                        ref="upload"
                                        :max-size="500"
                                        :show-upload-list="false"
                                        action="https://up.qiniup.com"
                                        :on-format-error="handleFormatError"
                                        :before-upload="handleBeforeUpload"
                                        :on-progress="handleProgress"
                                        :on-success="handleSuccess"
                                        :on-error="handleError"
                                        :data="{token:upload_token}"
                                >
                                    <Button cover="ios-cloud-upload-outline">上传文件</Button>
                                    <span style="padding-left:20px; color:#999">建议尺寸: 150*120px，JPG、PNG、JPEG格式，图片小于500KB</span>
                                </Upload>
                            </div>
                        </Row>
                        <Row class="margin-top-20">
                            <div class="" v-if="this.formValidate.company_code_img">
                                <template>
                                    <div class="demo-upload-list">
                                        <img :src="this.formValidate.company_code_img" style='width:150px; height:100px'>
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(this.formValidate.company_code_img)"></Icon>
                                            <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </Row>
                    </div>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit" style="width: 90px;height: 35px;border-radius: 0;font-size: 14px;">提交</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal title="查看图片" v-model="visible" style="z-index: 1000">
            <img :src="imgName" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    import config from '@/config'
    import { getQiniu, getUserAuthList, userAuthAudit, editUserAuth, changeUserAuthStatus} from '@/api/main'
    export default {
        data() {
            return {
                upload_token: '',
                qiniu_url: '',
                visible: false,
                imgName: '',
                columns: [
                    {
                        key: 'phone',
                        title: '用户手机号',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.phone)
                        },
                    },
                    {
                        key: 'name',
                        title: '用户姓名',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.name)
                        },
                    },
                    {
                        key: 'company_name',
                        title: '公司名称',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.company_name)
                        },
                    },
                    {
                        key: 'company_address',
                        title: '公司地址',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.company_address)
                        },
                    },
                    {
                        key: 'company_code',
                        title: '社会信用代码',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.company_code)
                        },
                    },
                    {
                        key: 'company_code_img',
                        title: '营业执照',
                        align: 'center',
                        render: (h, params) => {
                            return h(
                                'div',
                                {
                                    style: {
                                        backgroundImage: 'url(' + params.row.company_code_img + ')',
                                        width: '150px',
                                        height: '120px',
                                        objectFit:'cover',
                                        margin: '10px auto',
                                        position: 'relative',
                                        cursor: 'pointer',
                                        backgroundSize: 'cover',
                                    },
                                    on: {
                                        click: e => {
                                        },
                                    },
                                }
                            )
                        },
                    },
                    {
                        key: 'created_time',
                        title: '提交时间',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.created_time)
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                              h(
                                  'Button',
                                  {
                                      style: {
                                          marginBottom: '5px',
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF'
                                      },
                                      on: {
                                          click: () => {
                                            this.editUserAuth(params.row)
                                          },
                                      },
                                  },
                                  '编辑',
                              ),
                              h(
                                  'Button',
                                  {
                                      style: {
                                          marginBottom: '5px',
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF',
                                          display: params.row.audit_status == 0 ? 'inline-block': 'none'
                                      },
                                      on: {
                                          click: () => {
                                            this.item_id = params.row.id
                                            this.show_audit = true
                                          },
                                      },
                                  },
                                  '审核',
                              ),
                              h(
                                    'Poptip',
                                    {
                                        props: {
                                            confirm: true,
                                            title: '您确定要删除该条数据吗?',
                                            transfer: true,
                                        },
                                        on: {
                                            'on-ok': () => {
                                                let obj = {}
                                                obj.id = params.row.id
                                                obj.status = -1
                                                changeUserAuthStatus(obj).then(res => {
                                                    if (res.code === 0) {
                                                      this.$Message.success('操作成功')
                                                      this.getUserAuthList()
                                                    } else {
                                                        this.$Message.error(res.text)
                                                    }
                                                })
                                            },
                                        },
                                    },
                                    [
                                        h(
                                            'Button',
                                            {
                                                style: {
                                                    marginBottom: '5px',
                                                    border:0,
                                                    background:'transparent',
                                                    fontSize:'14px',
                                                    color:'#377EEF'
                                                },
                                                props: {
                                                    placement: 'top',
                                                    size: 'small',
                                                },
                                            },
                                            '删除',
                                        ),
                                    ],
                                ),
                            ])
                        },
                    },
                ],
                pagenation: {},
                page: 0,
                list: [],
                filter: {
                    page: 0,
                    phone: '',
                    company_name: '',
                    audit_status: '-2',
                },
                formValidate: {
                    id: 0,
                    company_name: '',
                    company_address: '',
                    company_code: '',
                    company_code_img: 0
                },
                item_id: 0,
                show_audit: false,
                audit_status: '1',
                remark: '',
                edit_company: false
            }
        },
        methods: {
            change: function(page) {
                this.filter.page = page-1
                this.getUserAuthList()
            },
            search: function () {
                this.filter.page = 0
                this.getUserAuthList()
            },
            editUserAuth(item) {
              this.formValidate.id = item.company_id
              this.formValidate.company_name = item.company_name
              this.formValidate.company_address = item.company_address
              this.formValidate.company_code = item.company_code
              this.formValidate.company_code_img = item.company_code_img
              this.edit_company = true
            },
            auditUserAuthOk() {
              if (this.audit_status == 2 && this.remark == '') {
                this.$Message.error('请输入拒绝原因');return;
              }
              let obj = {}
              obj.id = this.item_id
              obj.audit_status = this.audit_status
              obj.remark = this.remark
              userAuthAudit(obj).then(res => {
                if (res.code == 0) {
                  this.$Message.success('操作成功')
                  this.show_audit = false
                  this.init()
                } else {
                  this.$Message.error(res.text)
                }
              })
            },
            handleSubmit() {
              if (this.formValidate.company_name == '') {
                this.$Message.error('请输入公司名称');return;
              }
              if (this.formValidate.company_address == '') {
                this.$Message.error('请输入公司地址');return;
              }
              if (this.formValidate.company_code == '') {
                this.$Message.error('请输入社会信用代码');return;
              }
              if (this.formValidate.company_code_img == '') {
                this.$Message.error('请上传营业执照');return;
              }
              editUserAuth(this.formValidate).then(res => {
                if (res.code == 0) {
                  this.getUserAuthList()
                  this.edit_company = false
                  this.$Message.success("操作成功")
                } else {
                    this.$Message.error(res.text)
                }
              })
            },
            getUserAuthList () {
                getUserAuthList(this.filter).then(res => {
                    if (res.code == 0) {
                        this.list = res.data
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    } else {
                        this.$Message.error(res.text)
                    }
                })
            },
            async init() {
              let qiniu = await getQiniu()
              this.upload_token = qiniu.token
              this.qiniu_url = qiniu.url
            },
            handleFormatError(file) {
                this.$Message.error('文件 ' + file.name + ' 格式不正确，请选择图片文件。')
            },
            handleBeforeUpload(file) {
                if(file.size > 500 * 1024){
                    this.$Message.error("图片大小不能超过500KB");
                    return;
                }
            },
            handleProgress(event, file) {},
            handleSuccess(event, file, fileList) {
                this.formValidate.company_code_img = file.response.domain+file.response.key
            },
            handleError(event, file) {},
            handleView(img_url) {
                this.imgName = img_url
                this.visible = true
            },
            handleRemove() {
                this.formValidate.company_code_img = '';
            },
        },
        mounted() {
            this.init()
            this.getUserAuthList()
        },
    }
</script>
